<%@page import="br.com.sistema.util.validacao.TipoParametro"%>
<%@page import="br.com.sistema.entidades.editor.Editor"%>
<%@page import="br.com.sistema.util.validacao.InvalidateException"%>
<%@page import="br.com.sistema.util.validacao.TipoRetorno"%>
<%@page import="br.com.sistema.util.validacao.ValidacaoUtil"%>
<%@page import="br.com.sistema.util.StringUtils"%>
<%@page import="br.com.sistema.entidades.Noticia"%>
<%@page import="java.sql.SQLException"%>
<%@page import="br.com.sistema.entidades.Pagina"%>
<%@page import="br.com.sistema.entidades.ItemMenu"%>
<%@page import="java.util.List"%>
<%@page import="br.com.sistema.entidades.MenuTopo"%>
<%@page import="br.com.sistema.entidades.MenuLateral"%>
<%@page import="br.com.sistema.entidades.Menu"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    ValidacaoUtil valMenu = new ValidacaoUtil(TipoRetorno.RETORNO_MENSAGEM, request, response);
    if (request.getMethod().equalsIgnoreCase("POST")) {
        try {
            Editor editor = valMenu.getUsuarioValido();

            Integer idItemMenu = (Integer) valMenu.validarParametroRequisicaoSimples("item", TipoParametro.INTEIRO);
            Integer idPagina = (Integer) valMenu.validarParametroRequisicaoSimples("pagina", TipoParametro.INTEIRO);

            ItemMenu itemMenu = ItemMenu.getItemMenu(idItemMenu);
            Pagina pagina = Pagina.getPagina(idPagina);

            if (itemMenu == null) {
                valMenu.gerarErroEntidadeNaoEncontrada("item");
            }
            if (pagina == null) {
                valMenu.gerarErroEntidadeNaoEncontrada("pagina");
            }

            pagina.setItemMenu(itemMenu);
            pagina.alterar();

            valMenu.gerarStatusOK("Página alterada com sucesso!");
            out.print(valMenu.getMensagem("editor?conteudo=menu"));
        } catch (InvalidateException ex) {
            out.print(valMenu.getMensagem(null));
        }
    }
    if (request.getMethod().equalsIgnoreCase("GET")) {

        try {
            Editor editor = valMenu.getUsuarioValido();

            List<MenuTopo> menusTopo = MenuTopo.getMenus();
            List<MenuLateral> menusLaterais = MenuLateral.getMenus();
            List<Pagina> paginasSemMenu = Pagina.getPaginasSemMenu();
            List<Noticia> noticiasSemMenu = Noticia.getNoticiasSemMenu();
%>
<style>
    .menu_container,
    .itens_menu,
    .add_menu{
        display: none;
    }

    .menu_container{
        float: left;
    }

    .menu_area{
        float: left;
        width: 230px;
    }

    .itens_menu{
        float: left;
        width: 400px;
        margin-left: 25px;
    }

    ul.lista_menus li,
    ul.lista_itens_menu li{
        cursor: pointer;
    }

    ul.lista_menus,
    ul.lista_itens_menu {
        list-style-type: none; 
        margin: 0; 
        padding: 0;
    }

    ul.lista_menus li,
    ul.lista_itens_menu li{
        margin: 8px 0px;
        padding: 5px 5px 5px 25px;
        height: 25px;
        background-image: url('img/cross.gif');
        background-repeat: no-repeat;
        background-position: 5px;
    }

    .select_paginas{
        float: right;
    }
</style>
<script>
    function mostrarMenu(select){
        $('.menu_container').hide(0);
        var tipo = $('option:selected', select).val();
        if(tipo != ''){
            $('#menu_container_'+tipo).show('fast');
        }
    }
    
    function addMenu(tipo){
        $('#add_menu_'+tipo).toggle('fast');
    }
    
    function showItens(id, tipo){
        $('.itens_menu').hide(0);
        $('#itens_menu_'+tipo+'_'+id).show('fast');
    }
    
    $(function() {
        $( "#lista_menus_topo" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#lista_menus_topo" ).disableSelection();
        
        $( "#lista_menus_lateral" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#lista_menus_lateral" ).disableSelection();
    });
    
    function mudarPagina(select, itemMenuId){
        var paginaId = $('option:selected', select).val();
        var mensagem = 'Deseja alterar a Página padrão desse Item de Menu?';
        confirmar(mensagem, 'Sim', 'Não', function(clicked){
            if(clicked){
                var submitForm = getNewSubmitForm();
                createNewFormElement(submitForm, 'item', itemMenuId);
                createNewFormElement(submitForm, 'pagina', paginaId);
                submitForm.action= "editor?conteudo=menu";
                submitForm.submit();
            }
        });
    }
</script>
<div id="tipo_menu">
    <select onchange="mostrarMenu(this)">
        <option>Selecione um tipo</option>
        <option value="topo">Menu Topo</option>
        <option value="lateral">Menu Lateral</option>
    </select>  
</div>
<div id="info"></div>
<div id="menu_container_topo" class="menu_container wrapper">
    <div class="menu_area">
        <%
            if (menusTopo.size() > 0) {
        %>
        <div class="menus">
            <ul id="lista_menus_topo" class="lista_menus">
                <%for (MenuTopo menu : menusTopo) {%>
                <li class="ui-state-default" onclick="showItens('<%=menu.getId()%>','topo')"><%=menu.getNome()%></li>
                <%}%>
            </ul>
        </div>
        <%
            } else {
                out.print("Ainda não há menus definidos.");
            }
        %>
        <div>
            <a href="javascript:void(0)" onclick="addMenu('topo')">Acrescentar novo Menu</a>
            <div id="add_menu_topo" class="add_menu">
                <form action="menu" method="POST" >
                    <input id="nome" name="nome" type="text" placeholder="Nome do Menu" value="" />
                    <input id="tipo" name="tipo" type="hidden" value="topo" />
                    <input type="button" value="Adicionar Menu" />
                </form>
            </div>
        </div>
    </div>
    <%
        for (MenuTopo menu : menusTopo) {
    %>
    <script>
        $(function(){
            $("#ul_topo_<%=menu.getId()%>").sortable({
                update : function () {
                    var order = $('#ul_topo_<%=menu.getId()%>').sortable('serialize', {key:'indice'}); 
                    $("#info").load("alterar-indice?tipo=topo&menu=<%=menu.getId()%>&"+order); 
                },
                placeholder: "ui-state-highlight"
            });
            $( "#ul_topo_<%=menu.getId()%>" ).disableSelection();
        });
    </script>
    <div id="itens_menu_topo_<%=menu.getId()%>" class="itens_menu">
        <ul id="ul_topo_<%=menu.getId()%>" class="lista_itens_menu">
            <%
                for (ItemMenu itemMenu : menu.getItensMenu()) {
            %>
            <li class="ui-state-default"><%=itemMenu.getNome()%></li>
            <%
                }
            %>
        </ul>
    </div>
    <%
        }
    %>
</div>

<div id="menu_container_lateral" class="menu_container wrapper">
    <div class="menu_area">
        <%
            if (menusLaterais.size() > 0) {
        %>
        <div class="menus">
            <ul id="lista_menus_lateral" class="lista_menus">
                <%for (MenuLateral menu : menusLaterais) {%>
                <li class="ui-state-default" onclick="showItens('<%=menu.getId()%>','lateral')"><%=menu.getNome()%></li>
                <%}%>
            </ul>
        </div>
        <%
            } else {
                out.print("Ainda não há menus definidos.");
            }
        %>
        <div>
            <a href="javascript:void(0)" onclick="addMenu('lateral')">Acrescentar novo Menu</a>
            <div id="add_menu_lateral" class="add_menu">
                <form action="menu" method="POST" >
                    <input id="nome" name="nome" type="text" placeholder="Nome do Menu" value="" />
                    <input id="tipo" name="tipo" type="hidden" value="lateral" />
                    <input type="button" value="Adicionar Menu" />
                </form>
            </div>
        </div>
    </div>
    <%
        for (MenuLateral menu : menusLaterais) {
    %>
    <script>
        $(function(){
            $("#ul_lateral_<%=menu.getId()%>").sortable({
                update : function () {
                    var order = $('#ul_lateral_<%=menu.getId()%>').sortable('serialize', {key:'indice'}); 
                    $("#info").load("alterar-indice?tipo=lateral&menu=<%=menu.getId()%>&"+order); 
                },
                placeholder: "ui-state-highlight"
            });
            $( "#ul_lateral_<%=menu.getId()%>" ).disableSelection();
        });
    </script>
    <div id="itens_menu_lateral_<%=menu.getId()%>" class="itens_menu">
        <ul id="ul_lateral_<%=menu.getId()%>" class="lista_itens_menu">
            <%
                for (ItemMenu itemMenu : menu.getItensMenu()) {
            %>
            <li id="lateral_item_<%=itemMenu.getId()%>" class="ui-state-default"><%=itemMenu.getNome()%> <%=getSelectPaginas(itemMenu, paginasSemMenu, noticiasSemMenu)%></li>
            <%
                }
            %>
        </ul>
    </div>
    <%
        }
    %>
</div>
<%
        } catch (InvalidateException ex) {
            out.print(valMenu.getMensagem("editor"));
        }
    }
%>

<%!
    private String getSelectPaginas(ItemMenu itemMenu, List<Pagina> paginasSemMenu, List<Noticia> noticiasSemMenu) throws SQLException {
        String result = "";
        if (paginasSemMenu.size() > 0 || noticiasSemMenu.size() > 0) {
            // PÁGINAS
            for (Pagina pagina : paginasSemMenu) {
                result += "<option value='" + pagina.getId() + "'>" + reduzirParaCaber(pagina.getTitulo()) + "</option>";
            }
            if (paginasSemMenu.size() > 0) {
                result = "<optgroup label='Páginas Simples'>" + result + "</optgroup>";
            }
            // NOTICIAS
            for (Noticia noticia : noticiasSemMenu) {
                result += "<option value='" + noticia.getId() + "'>" + reduzirParaCaber(noticia.getTitulo()) + "</option>";
            }
            if (noticiasSemMenu.size() > 0) {
                result = "<optgroup label='Notícias'>" + result + "</optgroup>";
            }

            if (itemMenu.getPagina() != null) {
                result = "<option value='" + itemMenu.getPagina().getId() + "'selected>" + reduzirParaCaber(itemMenu.getPagina().getTitulo()) + "</option>" + result;
            } else {
                result = "<option>Escolha a página</option>" + result;
            }

            result = "<select class='select_paginas' onchange='mudarPagina(this,\"" + itemMenu.getId() + "\")'>" + result + "</select>";
        } else {
            if (itemMenu.getPagina() != null) {
                result += "<select class='select_paginas'><option value='" + itemMenu.getPagina().getId() + "'selected>" + reduzirParaCaber(itemMenu.getPagina().getTitulo()) + "</option></select>";
            }
        }
        return result;
    }

    private String reduzirParaCaber(String texto) {
        int maxChars = 20;
        if (texto.length() > maxChars) {
            return StringUtils.truncaLength(texto, 20) + "...";
        } else {
            return texto;
        }
    }
%>